'use client';
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import styles from './chat-history.module.css';

// 数据类型接口（匹配后端返回结构）
interface ContextItem {
  id: string;
  role: string;
  content: string;
  date: string;
}

interface Mask {
  id: number;
  name: string;
  avatar: string;
  context: ContextItem[];
}

interface ChatMessage {
  id: string;
  role: 'agent' | 'user';
  content: string;
  date: string;
}

interface Session {
  id: string;
  creatTime: string;
  lastUpdate: string;
  topic: string;
  messages: ChatMessage[];
  mask: Mask;
}

export default function ChatHistory() {
  const [sessions, setSessions] = useState<Session[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [tipMsg, setTipMsg] = useState<string | null>(null); // 操作提示（成功/失败）
  const [isSuccessTip, setIsSuccessTip] = useState<boolean>(false); // 区分成功/失败提示
  const navigate = useNavigate();

  // 1. 获取会话列表数据
  useEffect(() => {
    const fetchSessions = async () => {
      try {
        const response = await fetch('http://localhost:8080/session/all');
        if (!response.ok) throw new Error(`请求失败: ${response.statusText}`);
        
        const data: Session[] = await response.json();
        // 按最后更新时间排序（最新会话在前）
        const sortedSessions = data.sort((a, b) => 
          new Date(b.lastUpdate).getTime() - new Date(a.lastUpdate).getTime()
        );
        
        setSessions(sortedSessions);
      } catch (err) {
        showTip(err instanceof Error ? err.message : '获取会话失败，请重试', false);
      } finally {
        setLoading(false);
      }
    };
    fetchSessions();
  }, []);

  // 2. 显示操作提示（3秒后自动消失）
  const showTip = (msg: string, isSuccess: boolean) => {
    setTipMsg(msg);
    setIsSuccessTip(isSuccess);
    setTimeout(() => {
      setTipMsg(null);
      setIsSuccessTip(false);
    }, 3000);
  };

  // 3. 会话跳转逻辑
  const handleSessionClick = (sessionId: string) => {
    navigate(`/session?sessionId=${sessionId}`);
    console.log(sessionId);
  };

  // 4. 时间格式化（友好显示）
  const formatSessionTime = (timeString: string) => {
    const date = new Date(timeString);
    const now = new Date();
    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
    const sessionDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
    const diffDays = Math.ceil((today.getTime() - sessionDate.getTime()) / (1000 * 60 * 60 * 24));

    if (diffDays === 0) return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
    if (diffDays === 1) return '昨天';
    if (diffDays < 7) return ['周日','周一','周二','周三','周四','周五','周六'][date.getDay()];
    return date.toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' });
  };

  // 5. 最新消息预览（简化显示）
  const getLastMessagePreview = (messages: ChatMessage[]) => {
    if (messages.length === 0) return '未开始对话';
    
    const lastMessage = messages.sort((a, b) => 
      new Date(b.date).getTime() - new Date(a.date).getTime()
    )[0];
    
    return lastMessage.role === 'user' 
      ? `我: ${lastMessage.content.slice(0, 25)}${lastMessage.content.length > 25 ? '...' : ''}` 
      : `AI: ${lastMessage.content.slice(0, 25)}${lastMessage.content.length > 25 ? '...' : ''}`;
  };

  // 6. 核心删除逻辑（点击直接删除，无确认）
  const handleDeleteSession = async (sessionId: string, e: React.MouseEvent) => {
    e.stopPropagation(); // 阻止事件冒泡（避免触发会话跳转）
    
    try {
      // 发送DELETE请求到后端接口
      const response = await fetch(`http://localhost:8080/session/delete?sessionId=${sessionId}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' }
      });

      if (!response.ok) throw new Error(`删除失败: ${response.statusText}`);
      
      // 删除成功：即时更新前端列表（过滤已删除项）
      setSessions(prev => prev.filter(session => session.id !== sessionId));
      showTip('会话删除成功', true); // 显示成功提示
    } catch (err) {
      // 删除失败：显示错误提示
      showTip(err instanceof Error ? err.message : '删除失败，请重试', false);
    }
  };

  // 加载状态显示
  if (loading) {
    return (
      <div className={styles.loadingContainer}>
        <div className={styles.spinner}></div>
        <p className={styles.loadingText}>加载历史会话中...</p>
      </div>
    );
  }

  // 无会话状态显示
  if (sessions.length === 0) {
    return (
      <div className={styles.emptyContainer}>
        <span className={styles.emptyIcon}>📭</span>
        <p className={styles.emptyText}>暂无历史会话</p>
        <p className={styles.emptyTip}>点击"新增面具"开始新对话吧</p>
      </div>
    );
  }

  // 主内容渲染（无确认弹窗，直接删除）
  return (
    <div className={styles.chatHistoryContainer}>
      {/* 列表头部 */}
      <div className={styles.historyHeader}>
        <h3 className={styles.headerTitle}>历史会话</h3>
        <span className={styles.sessionCount}>{sessions.length} 个会话</span>
      </div>

      {/* 操作提示（成功/失败，自动消失） */}
      {tipMsg && (
        <div className={`${styles.tipBar} ${isSuccessTip ? styles.successTip : styles.errorTip}`}>
          <span className={styles.tipIcon}>{isSuccessTip ? '✅' : '⚠️'}</span>
          <span className={styles.tipText}>{tipMsg}</span>
        </div>
      )}

      {/* 会话列表（每项带直接删除按钮） */}
      <div className={styles.sessionList}>
        {sessions.map((session) => (
          <div 
            key={session.id}
            className={styles.sessionItem}
            title={`${session.mask.name} - ${session.topic}`}
            onClick={() => handleSessionClick(session.id)}
          >
            {/* 面具头像 */}
            <div className={styles.maskAvatar}>
              {session.mask.avatar && !['asd', 'asdf', 'asdfg', 'asdfgh'].includes(session.mask.avatar) 
                ? (
                  <img 
                    src={session.mask.avatar} 
                    alt={session.mask.name}
                    className={styles.avatarImage}
                  />
                ) : (
                  <span className={styles.avatarText}>{session.mask.name.charAt(0)}</span>
                )
              }
            </div>

            {/* 会话信息（标题、时间、最新消息、面具标签） */}
            <div className={styles.sessionInfo}>
              <div className={styles.sessionHeader}>
                <h4 className={styles.sessionTopic}>{session.topic}</h4>
                <span className={styles.sessionTime}>{formatSessionTime(session.lastUpdate)}</span>
              </div>
              <p className={styles.lastMessage}>{getLastMessagePreview(session.messages)}</p>
              <span className={styles.maskTag}>{session.mask.name}</span>
            </div>

            {/* 直接删除按钮（hover时显示，点击立即删除） */}
            <button
              className={styles.deleteBtn}
              onClick={(e) => handleDeleteSession(session.id, e)}
              title="删除会话"
            >
              删除
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}